import React from "react";
import { Button, Table } from "antd";

// 列：
// 数组有几项值就渲染几列
// title 表头名称
// dataIndex 要渲染data中哪个数据属性
// key 遍历元素的key属性（要求唯一，不重复）
const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "地址",
    dataIndex: "address",
    key: "address",
  },
  {
    title: "标签",
    key: "tags",
    dataIndex: "tags",
  },
  {
    title: "操作",
    key: "operator",
    render: () => {
      return (
        <Button type="primary" danger size="small">
          删除
        </Button>
      );
    },
  },
];

// 数据源：表格要渲染的数据
// 数组有几项值就渲染几行
const data = [
  {
    key: "1", // 需要key
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    tags: ["nice", "developer"],
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    tags: ["loser"],
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sydney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
];

const App = () => {
  return <Table columns={columns} dataSource={data} bordered />;
};

export default App;
